<template>
  <my-layout
    ref="my-layout"
    @scrolltolower="scrolltolower"
    :tabbar-is-show="true"
    :tab-bar-index="1"
  >
    <template #TopBackground>
      <my-top-background />
    </template>
    <template #Navbar>
      <view
        style="
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        "
      >
        <!--地理位置选择-->
        <view
          @click="popIsShow = true"
          style="
            margin-left: 34rpx;
            height: 66rpx;
            background-color: #ffffff;
            border-radius: 100rpx;
            display: flex;
          "
        >
          <view
            style="
              font-size: 28rpx;
              color: #333;
              line-height: 40rpx;
              margin-left: 30rpx;
              margin-top: 12rpx;
            "
            >{{ city.name ? city.name : "定位失败" }}</view
          >
          <image
            :src="indexTabBarUrl.redDownUrl"
            style="
              width: 20rpx;
              height: 14rpx;
              vertical-align: top;
              margin-left: 4rpx;
              margin-right: 30rpx;
              margin-top: 26rpx;
            "
          />
        </view>
      </view>
    </template>
    <template #Body>
      <!--伴你笑开怀-->
      <view
        style="
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-top: 22rpx;
        "
      >
        <view
          style="
            width: 330rpx;
            height: 112rpx;
            margin-left: 32rpx;
            position: relative;
          "
        >
          <image
            style="width: 100%; height: 100%"
            :src="indexTabBarUrl.happyTextUrl"
          ></image>
          <view
            style="
              left: 318rpx;
              top: 38rpx;
              position: absolute;
              border-radius: 8rpx;
              background-color: #fbd632;
            "
          >
            <view
              style="
                font-size: 18rpx;
                line-height: 26rpx;
                margin-left: 8rpx;
                margin-right: 8rpx;
                white-space: nowrap;
              "
              >{{ city.name ? city.name : "定位失败" }}</view
            >
          </view>
        </view>
        <view
          style="
            width: 136rpx;
            height: 60rpx;
            margin-top: 34rpx;
            margin-right: 36rpx;
            background-color: #242529;
            border-radius: 48rpx;
          "
        >
          <view
            style="
              color: #fbd632;
              font-size: 24rpx;
              line-height: 34rpx;
              margin-left: 18rpx;
              margin-top: 14rpx;
            "
            >立即订阅</view
          >
        </view>
      </view>
      <!--记录即有光-->
      <my-swiper
        :inner-style="`margin-left: 24rpx; margin-top: 24rpx;width: 690rpx; height: 190rpx;border-radius: 20rpx;`"
        :list="bannerList"
        url-key-path="icon[0]"
        @click="bannerClick"
      >
      </my-swiper>
      <!--公告-->
      <view
        style="
          width: 690rpx;
          height: 76rpx;
          border-radius: 20rpx;
          margin-left: 24rpx;
          margin-top: 28rpx;
          overflow: hidden;
          display: flex;
        "
      >
        <image
          :src="indexTabBarUrl.newPublishUrl"
          style="width: 116rpx; height: 76rpx; vertical-align: top"
        />
        <swiper
          style="width: 574rpx; height: 76rpx"
          indicator-color="rgba(255,255,255,0.5)"
          indicator-active-color="#fff"
          :circular="true"
          autoplay="true"
          interval="2000"
          duration="500"
          :vertical="true"
          :indicator-dots="false"
        >
          <swiper-item v-for="item of noticeList" :key="item.icon[0]">
            <view
              style="display: flex; background-color: #ffffff"
              @click="noticeClick(item)"
            >
              <image
                :src="item.icon[0]"
                style="width: 116rpx; height: 76rpx; vertical-align: top"
              />
              <text
                style="
                  margin-left: 14rpx;
                  margin-top: 20rpx;
                  width: 304rpx;
                  height: 40rpx;
                  overflow: auto;
                  font-size: 28rpx;
                  line-height: 40rpx;
                  color: #666666;
                "
                >{{ item.value }}</text
              >
              <image
                :src="indexTabBarUrl.right"
                style="
                  width: 10rpx;
                  height: 16rpx;
                  margin-left: 102rpx;
                  margin-top: 30rpx;
                  vertical-align: top;
                "
              />
            </view>
          </swiper-item>
        </swiper>
      </view>
      <!--今日主题（剧场）-->
      <view
        style="width: 100%; height: 860rpx; background-size: 100% 900rpx"
        :style="{ backgroundImage: `url(${indexTabBarUrl.topicBackground})` }"
      >
        <image
          :src="indexTabBarUrl.topic"
          style="
            width: 150rpx;
            height: 86rpx;
            margin-left: 66rpx;
            margin-top: 15rpx;
            vertical-align: top;
          "
        />
        <view
          style="
            font-size: 28rpx;
            line-height: 40rpx;
            color: #333333;
            margin-left: 64rpx;
          "
          >{{ show.introduce }}</view
        >
        <my-swiper
          :inner-style="`width: 622rpx; height: 348rpx;margin-left: 64rpx; margin-top: 32rpx; border-radius: 20rpx; overflow: hidden`"
          :list="showList"
          url-key-path="pictures[0]"
          @change="
            (event) => {
              show = showList[event.detail.current];
            }
          "
          @click="topicClick"
        />
        <view
          style="
            display: grid;
            grid-template-columns: 112rpx 316rpx;
            column-gap: 28rpx;
            grid-template-rows: 40rpx 40rpx;
            row-gap: 16rpx;
            margin-left: 66rpx;
            margin-top: 26rpx;
          "
        >
          <view class="grid-name">演出日期</view>
          <view class="grid-value">{{ show.show_dates }}</view>
          <view class="grid-name">演出时间</view>
          <view class="grid-value">{{ show.show_times }}</view>
          <view class="grid-name">演出地点</view>
          <view class="grid-value">{{ show.show_address }}</view>
        </view>
        <view
          @click="goticketing(show.id)"
          style="
            width: 610rpx;
            height: 96rpx;
            border-radius: 20rpx;
            background-color: #fbd93a;
            margin-left: 70rpx;
            margin-top: 28rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 32rpx;
            line-height: 44rpx;
            color: #333;
            font-weight: bold;
          "
          >立即购票</view
        >
      </view>
      <!--演员信息-->
      <view>
        <!--标题-->
        <image
          :src="indexTabBarUrl.actorTitle"
          style="
            width: 144rpx;
            height: 50rpx;
            margin-left: 32rpx;
            margin-top: 44rpx;
          "
        />
        <!--横向滑动-->
        <scroll-view
          :scroll-x="true"
          :enhanced="true"
          :show-scrollbar="false"
          style="width: 690rpx; margin-left: 32rpx; margin-top: 20rpx"
        >
          <view style="display: flex; column-gap: 16rpx">
            <view
              v-for="item of actorList"
              :key="item.id"
              style="
                width: 240rpx;
                height: 242rpx;
                background-size: 240rpx 242rpx;
                flex: none;
              "
              :style="{ backgroundImage: `url(${item.background_picture[0]})` }"
              @click="actorClick(item)"
            >
              <view
                style="
                  width: 84rpx;
                  height: 40rpx;
                  margin-left: 14rpx;
                  margin-top: 40rpx;
                  font-size: 28rpx;
                  line-height: 40rpx;
                  color: #594621;
                "
                >{{ item.name }}</view
              >
              <view
                style="
                  width: 140rpx;
                  height: 28rpx;
                  font-size: 20rpx;
                  line-height: 28rpx;
                  color: #75613d;
                  margin-left: 14rpx;
                "
                >出场时间 {{ item.show_time.split(" ")[1].slice(0, 5) }}</view
              >
              <view
                style="
                  box-sizing: border-box;
                  width: 216rpx;
                  height: 114rpx;
                  margin-left: 12rpx;
                  margin-top: 10rpx;
                  padding: 14rpx;
                  border-radius: 20rpx;
                  background-color: #fff;
                  font-size: 20rpx;
                  line-height: 28rpx;
                  color: #666666;
                "
              >
                {{ item.introduce }}
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <!--二人转大戏-->
      <view>
        <!--标题-->
        <image
          :src="indexTabBarUrl.dramaTitle"
          style="
            width: 180rpx;
            height: 50rpx;
            margin-left: 32rpx;
            margin-top: 44rpx;
          "
        />
        <swiper
          style="
            overflow: hidden;
            position: relative;
            width: 690rpx;
            height: 348rpx;
            margin-left: 30rpx;
            margin-top: 46rpx;
            border-radius: 20rpx;
          "
          indicator-color="rgba(255,255,255,0.5)"
          indicator-active-color="#fff"
          :circular="true"
          autoplay="true"
          interval="2000"
          duration="500"
          :vertical="false"
          :indicator-dots="false"
        >
          <swiper-item v-for="item of dramaList" :key="item.id">
            <view
              style="width: 100%; height: 100%; position: relative"
              @click="goVideos(item)"
            >
              <image :src="item.icon[0]" style="width: 100%; height: 100%" />
              <image
                :src="indexTabBarUrl.play"
                style="
                  width: 120rpx;
                  height: 120rpx;
                  position: absolute;
                  left: 282rpx;
                  top: 114rpx;
                "
              />
            </view>
          </swiper-item>
        </swiper>
      </view>
      <!--微短剧-->
      <view>
        <!--标题-->
        <view style="display: flex" @click="goshortPlay">
          <image
            :src="indexTabBarUrl.shortTitle"
            style="
              width: 108rpx;
              height: 50rpx;
              margin-left: 32rpx;
              margin-top: 44rpx;
            "
          />
          <view
            style="
              width: 534rpx;
              height: 60rpx;
              background-image: linear-gradient(90deg, #faf7d3, #e0f5b4);
              margin-left: 44rpx;
              margin-top: 42rpx;
              border-radius: 200rpx;
              padding: 12rpx 100rpx 12rpx 30rpx;
              box-sizing: border-box;
              font-size: 24rpx;
              line-height: 34rpx;
              color: #333;
              position: relative;
            "
          >
            演员都已上传精彩视频，尽情浏览吧~
            <image
              :src="indexTabBarUrl.starFace"
              style="
                width: 78rpx;
                height: 82rpx;
                position: absolute;
                left: 438rpx;
                top: -26rpx;
              "
            />
          </view>
        </view>
        <!--瀑布流-->
        <view style="margin: 32rpx 32rpx">
          <my-water-flow
            :value="
              _.map(shortList, (item) => {
                $set(item, 'image', item.cover[0]);
                $set(item, 'title', item.name);
                $set(item, 'description', item.introduce);
                return item;
              })
            "
            ref="waterFlowRef"
            :listStyle="{ backgroundColor: 'transparent' }"
            @imageClick="shortClick"
          >
            <view
              v-for="(item, index) of shortList"
              :key="item.id"
              slot="slot{{index}}"
            >
              <view>
                <view
                  style="
                    color: #ffffff;
                    font-size: 28rpx;
                    line-height: 40rpx;
                    font-weight: bold;
                  "
                  >{{ item.title }}</view
                >
                <view
                  style="
                    color: #ffffff;
                    font-size: 24rpx;
                    line-height: 34rpx;
                    width: 288rpx;
                    height: 68rpx;
                    overflow: hidden;
                  "
                  >{{ _.truncate(item.description, { length: 20 }) }}</view
                >
              </view>
            </view>
          </my-water-flow>
          <view
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              color: #3d3d3d;
            "
          >
            <view v-if="shortListLoading === 0">上拉刷新</view>
            <view v-if="shortListLoading === 1">刷新中...</view>
            <view v-if="shortListLoading === 2">--没有更多了--</view>
          </view>
        </view>
      </view>
    </template>
    <template #OutArea>
      <geo-select v-model="popIsShow" />
    </template>
  </my-layout>
</template>
<script>
import tabBar from "@/components/tabbar/tabbar.vue";
import navBar from "@/components/navbar/navbar.vue";
import positions from "@/components/positions/positions.vue";
import configApi from "@/utils/config.js";
import MyNavbar from "@/components/my-navbar/index.vue";
import MyBody from "@/components/my-body/index.vue";
import indexTabBarUrl from "@/url/index_tabBar";
import MyPop from "@/components/my-pop/index.vue";
import MyVideo from "@/components/my-video/index.vue";
import { reverseGeocoder } from "@/utils/geo";
import { mapState } from "vuex";

export default {
  components: {
    MyVideo,
    MyNavbar,
    MyBody,
    MyPop,
    "tab-bar": tabBar,
    "nav-bar": navBar,
    positions: positions,
  },
  computed: {
    ...mapState(["city"]),
  },
  data() {
    return {
      /**
       * 短剧分页对象
       */
      shortPagination: {
        page: 0,
      },
      total: 0,
      /**
       * 瀑布流刷新状态，0:待刷新 1:刷新中 2:没有更多
       * @type {0 | 1 | 2}
       */
      shortListLoading: 0,
      /**
       * 当前剧场
       * @type {Show}
       */
      show: null,
      /**
       * 地理信息弹出层显示
       */
      popIsShow: false,
      /**
       * 公共图片的 url
       */
      indexTabBarUrl,
      /**
       * banner 列表
       * @type {Banner[]}
       */
      bannerList: [],
      /**
       * 公告列表
       * @type {Notice[]}
       */
      noticeList: [],
      /**
       * 二人转大戏列表
       * @type {Drama[]}
       */
      dramaList: [],
      /**
       * 主题列表
       * @type {Show[]}
       */
      showList: [],
      /**
       * 短剧列表
       * @type {Short[]}
       */
      shortList: [],
      /**
       * 演员列表
       * @type {Index[]}
       */
      actorList: [],
    };
  },
  async onLoad(options) {
    try {
      this.$refs["my-layout"].openLoading();
      // 获取轮播图列表
      let bannerList = await configApi.getBannerList();
      this._.forEach(bannerList, (item) => {
        item.icon = JSON.parse(item.icon).map((item) => item.url);
      });
      this.bannerList = bannerList;
      // 获取公告列表
      let noticeList = await configApi.getNoticeList();
      this._.forEach(noticeList, (item) => {
        item.icon = JSON.parse(item.icon).map((item) => item.url);
      });
      this.noticeList = noticeList;
      // 获取剧场列表
      let showListPagination = await configApi.getPerform();
      this._.forEach(showListPagination.data, (item) => {
        item.pictures = JSON.parse(item.pictures).map((item) => item.url);
      });
      this.showList = showListPagination.data;
      this.show = this.showList[0];
      // 获取演员列表
      let actorListPagination = await configApi.getPerformer({ page: 1 });
      this._.forEach(actorListPagination.data, (item) => {
        item.background_picture = JSON.parse(item.background_picture).map(
          (item) => item.url
        );
        item.fans_group_qrcode = JSON.parse(item.fans_group_qrcode).map(
          (item) => item.url
        );
        item.pictures = JSON.parse(item.pictures).map((item) => item.url);
      });
      this.actorList = actorListPagination.data;
      // 获取二人转大戏列表
      let dramaList = await configApi.getSong();
      this._.forEach(dramaList, (item) => {
        item.drama_video = JSON.parse(item.drama_video).map((item) => item.url);
        item.icon = JSON.parse(item.icon).map((item) => item.url);
        item.picture = JSON.parse(item.picture).map((item) => item.url);
      });
      this.dramaList = dramaList;
      this.$refs["my-layout"].closeLoading();
    } catch (error) {
      this.$refs["my-layout"].closeLoading();
      wx.showToast({
        title: "网络异常",
        icon: "error",
        mask: true,
      });
    }
  },
  methods: {
    /**
     * 获取所在城市
     */
    async getLocation() {
      try {
        this.$refs["my-layout"].openLoading();
        let location = await wx.getLocation();
        console.log("地理信息", location);
        let result = await reverseGeocoder({ coord_type: 1, location });
        console.log("城市信息", result);
        this.city = { name: result.result.address_component.city };
        this.$refs["my-layout"].closeLoading();
      } catch (error) {
        console.log("获取地理失败", error);
        this.$refs["my-layout"].closeLoading();
      }
    },
    /**
     * 短剧瀑布流分页刷新
     */
    async addShort() {
      if (this.shortListLoading === 2 || this.shortListLoading === 1) {
        return;
      }
      try {
        this.shortListLoading = 1;
        let shortPagination = this._.cloneDeep(this.shortPagination);
        shortPagination.page++;
        let shortListPagination = await configApi.getshortPlay(shortPagination);
        this._.forEach(shortListPagination.data, (item) => {
          item.cover = JSON.parse(item.cover).map((item) => item.url);
        });
        this.shortList.push(...shortListPagination.data);
        this.total = shortListPagination.total;
        if (this.shortList.length === this.total) {
          this.shortListLoading = 2;
        } else {
          this.shortListLoading = 0;
        }
        this.shortPagination = shortPagination;
      } catch (error) {
        wx.showToast({
          title: "网络异常",
          icon: "error",
          mask: true,
        });
        this.shortListLoading = 0;
      }
    },
    /**
     * 今日主题点击
     * @param event
     */
    topicClick(event) {
      console.log("今日主题点击", event);
    },
    /**
     * 公告项点击事件
     * @param event
     */
    noticeClick(event) {
      console.log("公告项点击", event);
    },
    /**
     * 轮播项点击事件
     * @param event
     */
    bannerClick(event) {
      console.log("轮播项点击", event);
    },
    /**
     * 页面滚动到底部事件
     */
    async scrolltolower() {
      console.log("滚动到底部了");
      try {
        await this.addShort();
      } catch (error) {
        wx.showToast({
          title: "网络异常",
          icon: "error",
          mask: true,
        });
      }
    },
    /**
     * 二人转大戏被点击
     * @param item
     */
    goVideos(item) {
      console.log("二人转大戏被点击");
      if (!item) {
        item = "";
      }
      uni.navigateTo({
        url: "/pages/content/videos/videos?con=" + JSON.stringify(item),
      });
    },
    /**
     * 微短剧标题被点击
     */
    goshortPlay() {
      uni.navigateTo({
        url: "/pages/content/shortPlay/shortPlay",
      });
    },
    /**
     * 短剧被点击项进入播放页
     * @param event
     */
    shortClick(event) {
      uni.navigateTo({
        url: "/pages/content/shortPlayback/shortPlayback?id=" + event.id,
      });
    },
    /**
     * 点击立即购票
     * @param id
     */
    goticketing(id) {
      if (!id) {
        id = null;
      }
      uni.navigateTo({
        url: "/pages/content/ticeking/ticeking?id=" + id,
      });
    },
    //跳转演员详情
    actorClick(event) {
      uni.navigateTo({
        url: "/pages/content/performerDetails/performerDetails?id=" + event.id,
      });
    },
  },
};
</script>

<style lang="scss">
@import url("../../static/css/index.css");
.grid-name {
  font-size: 28rpx;
  line-height: 40rpx;
  color: #333;
  font-weight: bold;
}
.grid-value {
  font-size: 28rpx;
  line-height: 40rpx;
  color: #666;
}
.city-item {
  width: 100%;
  height: 100%;
  background-color: #f3f3f1;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #666;
  &.selected {
    background-color: #fbd93a;
  }
}
</style>
